<template>
    <div>
            项目名称：<input type="text" placeholder="请输入项目名称" v-model="name" />
            项目总金额度：<input type="text" placeholder="请输入项目总金额度" v-model="money1" />-<input type="text" placeholder="请输入项目总金额度" v-model="money2" />
            <button class="btn btn-primary" @click="getData()">查询</button>
            <h1>用户投资显示</h1>
        <table class="table" border="1">
            <thead>
                <tr>
                    <th>投资编号</th>
                    <th>投资名称</th>
                    <th>投资总额度</th>
                    <th>已投资额度</th>
                    <th>剩余额度</th>
                    <th>投资人数</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in info" :key="item.I_Id">
                    <td>{{item.I_Id}}</td>
                    <td>{{item.I_Name}}</td>
                    <td>{{item.I_Budget}}</td>
                    <td>{{item.I_Receive}}</td>  
                    <td>{{item.I_Residue}}</td>
                    <td>{{item.I_Number}}</td>
                    <td>
                        <a href="#" @click="Money(item.I_Id)">投资</a>
                    </td>
                </tr>
            </tbody>
        </table>
        <span>
            当前共{{page.recordCount}}条数据,
            每页显示{{page.pageSize}}条数据,
            当前第{{page.pageIndex}}页/
            共{{page.pageCount}}页,
            <a href="#" @click="getPage(1)">首页</a>
            <a href="#" @click="getPage(page.pageIndex-1)">上一页</a>
            <a href="#" @click="getPage(page.pageIndex+1)">下一页</a>
            <a href="#" @click="getPage(page.pageCount)">尾页</a>
    
            <select @change="pagesel()" v-model="sel">
                <option value="1">1条/页</option>
                <option value="2" selected>2条/页</option>
                <option value="3">3条/页</option>
            </select>
            <input type="text"  v-model="tes"  style="width: 50px;"/>
            <button class="btn btn-primary" @click="pagetex()">跳转</button>
    
        </span>
    </div>

    </template>
    <script setup lang="ts">
    import axios from 'axios';
    import { ref,onMounted } from 'vue';
    import router from '../../../router';

    import {useUserStore} from '../../../store/index'
    const userStore = useUserStore();


  
    
    const info:any = ref([])
    const name = ref('');
    const money1 = ref('');
    const money2 = ref('');
    const sel = ref(2);
    const tes = ref("");
    
    const pagesel=()=>{
        page.value.pageSize= sel.value;
        getData();
    }
    const pagetex=()=>{
        page.value.pageIndex= Number(tes.value);
        getData();
    }
    
    const page = ref({
        pageIndex:1,
        pageSize:2,
        recordCount:1,
        pageCount:1,
    })
    
    onMounted(()=>{
        getData();
    })
    
    const getData = ()=>{
        axios({
            method:'get',
            url:'http://localhost:57969/api/Invest/ShowInvestInfo',
            params:{
                name:name.value,
                money1:money1.value,
                money2:money2.value,
                pageSize:page.value.pageSize,
                pageIndex:page.value.pageIndex,
                
            }  
        })
        .then(res=>{
            info.value = res.data.list;  
            page.value.recordCount = res.data.recordCount;
            page.value.pageCount = res.data.pageCount;
            console.log(info.value);
        })
        .catch(err=>{
            console.log(err);
        })
        
    }
    
    const getPage = (i:number)=>{
        if(i>=1&&i<=page.value.pageCount)
        {
            page.value.pageIndex = i;
            getData();
        }
        else
        {
            alert('页码不正确');
        }
     
        
    }
    
    
    const Money=(id:number)=>{
        
        router.push({
            name:'InvestAddMoney',
            params:{
                id:id,
                Uid:userStore.id,
            }
        })
    }
</script>
    